import TextButton from '@/components/TextButton';
import { SEX_VALUE } from '@/configs/options.config';
import { getGamePersonIds, getGameResultScores } from '@/funcs/game';
import { AppContext } from '@/store/index.context';
import { Game } from '@/types/game';
import { Person } from '@/types/persons';
import { cloneDeep, times } from 'lodash';
import React, { useCallback, useContext, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import classes from './index.module.css';
import classnames from 'classnames';

export default function HistoryGame({
  game,
  showMergeChoice,
  merged,
  handleSelect,
}: {
  game: Game;
  showMergeChoice: boolean;
  merged: boolean;
  handleSelect: () => void;
}) {
  const navigate = useNavigate();
  const { gameStore, historyGamesStore, personStore, messageStore } =
    useContext(AppContext);
  const { setHistoryGame } = gameStore;
  const { setCurrentTemGame, removeHistoryGame } = historyGamesStore;
  const { getPersonsByIds } = personStore;
  const resultScores = useMemo(() => getGameResultScores(game), [game]);
  const personIds = useMemo(() => getGamePersonIds(game), [game]);

  const persons = useMemo(
    () => getPersonsByIds(personIds),
    [personIds, getPersonsByIds],
  );

  const infos = useMemo(() => {
    return times(4, num => {
      const person = persons[num] || ({} as Person);
      const score = resultScores[num + 1];
      return {
        sexIcon: person.sex
          ? person.sex === SEX_VALUE.MALE
            ? 'icon-wanghongshuaige'
            : 'icon-girl'
          : '',
        score,
        name: person.name,
        key: person.id,
      };
    });
  }, [persons, resultScores]);

  const handleEidt = useCallback(() => {
    const currentGame = setHistoryGame(cloneDeep(game));
    if (currentGame) {
      setCurrentTemGame(currentGame);
    }
    navigate('/game');
  }, [navigate, game, setHistoryGame, setCurrentTemGame]);

  function handleDelete() {
    messageStore.confirm('确定要删除吗 ?', () => {
      removeHistoryGame(game);
    });
  }

  return (
    <div className={classes.HistoryGame} onClick={handleSelect}>
      {showMergeChoice && (
        <span
          className={classnames(
            'iconfont',
            'icon-hudiejie',
            classes.ChoiceIcon,
            merged ? classes.SelectChoice : '',
          )}></span>
      )}
      <div className={classes.OneRow}>
        <div className={classes.GameTime}>
          开始时间：
          <span className={classes.GameTimes}>{game.startTime}</span>
        </div>
        {!showMergeChoice && (
          <div>
            <TextButton onClick={handleEidt}>编辑</TextButton>
            <TextButton onClick={handleDelete}>删除</TextButton>
          </div>
        )}
      </div>
      <div className={classes.InfoList}>
        {infos.map(info => (
          <div key={info.key}>
            <span
              className={classnames(
                'iconfont',
                info.sexIcon,
                classes.SexIcon,
              )}></span>
            <span className={classes.PersonName}>{info.name}</span>
            {info.score}
          </div>
        ))}
      </div>
    </div>
  );
}
